<template>
  <div class="app-container">
    <el-form ref="userFrom" :model="userFrom" :rules="rules" label-width="120px">
      <el-form-item label="角色" prop="role">
        <RoleRadio v-model="role" button student teacher />
      </el-form-item>
      <el-form-item label="所属学院" prop="collegeId">
        <CollegeSelect v-model="userFrom.collegeId" />
      </el-form-item>
      <el-form-item v-if="role === STUDENT" label="所属专业" prop="majorId">
        <MajorSelect v-model="userFrom.majorId" :college-id="userFrom.collegeId" />
      </el-form-item>
      <el-form-item v-if="role === STUDENT" label="所属班级" prop="classId">
        <ClassSelect v-model="userFrom.classId" :major-id="userFrom.majorId" />
      </el-form-item>
      <el-form-item label="学号" prop="id">
        <el-input
          ref="id"
          v-model="userFrom.id"
          placeholder="请输入学号"
          type="text"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input
          ref="name"
          v-model="userFrom.name"
          placeholder="请输入姓名"
          type="text"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <SexRadio v-model="userFrom.sex" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <StatusRadio v-model="userFrom.status" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAddUser">新增</el-button>
        <el-button @click="handleResetFrom">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { CollegeSelect, MajorSelect, ClassSelect, RoleRadio, SexRadio, StatusRadio } from '@/views/admin/import'
import { ROLE, SEX, STATUS } from '@/constant/user'
import { userIdPattern } from '@/utils/validate'
import { addUser } from '@/api/admin/user'

export default {
  name: 'AddUser',
  components: { CollegeSelect, MajorSelect, ClassSelect, RoleRadio, SexRadio, StatusRadio },
  data() {
    return {
      userFrom: {
        id: '',
        collegeId: undefined,
        majorId: undefined,
        classId: undefined,
        name: '',
        sex: SEX.MAN,
        status: STATUS.ENABLE
      },
      rules: {
        id: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { pattern: userIdPattern, message: '学号必须为12位数字', trigger: 'blur' }
        ],
        collegeId: [{ required: true, message: '请选择所属学院', trigger: 'blur' }],
        majorId: [{ required: true, message: '请选择所属专业', trigger: 'blur' }],
        classId: [{ required: true, message: '请选择所属班级', trigger: 'blur' }],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 25, message: '姓名长度不能超过25个字符', trigger: 'blur' }
        ]
      },
      role: ROLE.STUDENT,
      STUDENT: ROLE.STUDENT
    }
  },
  methods: {
    /**
     * 新增用户信息
     */
    handleAddUser() {
      this.$refs.userFrom.validate(async valid => {
        if (valid) {
          await addUser(this.userFrom, this.role)
          this.$message.success('新增成功')
          this.handleResetFrom()
        }
      })
    },
    /**
     * 重置表单
     */
    handleResetFrom() {
      this.$refs.userFrom.resetFields()
    }
  }
}
</script>
